<template>
  <el-row :gutter="20">
    <el-col :span="14">
      <!-- 查看历史病历弹窗 -->
      <medical-modify :visible="Visible" :partner-id="recordId" @fromson="fromSon" judge="detailed"></medical-modify>
      <!-- 病历模板弹窗 -->
      <el-dialog :title="titleName" v-model="templatesVisible">
        <div>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
              <el-autocomplete
                v-model="templateName"
                :fetch-suggestions="templateSearch"
                placeholder="模板搜索"
                :trigger-on-focus="false"
                @select="templateSelect">
              </el-autocomplete>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click.native="queryTemplate(templateName)" icon="search">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click.native="addTemplate">新增模板</el-button>
            </el-form-item>
          </el-form>  
        </div>
        <el-table :data="templateData" height="400" border stripe style="width: 100%">
          <el-table-column property="name" label="模板名" width="150"></el-table-column>
          <el-table-column property="content" label="模板内容"></el-table-column>
          <el-table-column inline-template label="操作" width="80">
            <div>
              <span>
                <el-button type="text" size="small" @click.native="callTemplate(row.content, row.type)">调用</el-button>
              </span>
              <span>
                <el-button type="text" size="small" @click.native="amendTemplate(row)">修改</el-button>
              </span>
              <span>
                <el-button type="text" size="small" @click.native="deleteTemplate(row.id)">删除</el-button>
              </span>
            </div>
          </el-table-column>
        </el-table>
      </el-dialog>
      <!-- 增改模板弹窗 -->
      <el-dialog title="模板" v-model="addTemplateVisible">
        <el-form label-width="80px">
          <el-form-item label="模板名">
            <el-input v-model="addTemplateInfo.name"></el-input>
          </el-form-item>
          <el-form-item label="模板内容">
            <el-input type="textarea" v-model="addTemplateInfo.content"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click.native="addTemplateVisible = false">取 消</el-button>
          <el-button type="primary" 
            @click.native="determine(addTemplateInfo)"
            >确 定</el-button>
        </span>
      </el-dialog>
      <!-- ICD全集弹窗 -->
      <el-dialog title="ICD全集" v-model="ICDVisible" size="large" style="width: 1200px; margin: 0 auto;">
        <el-row>
          <el-col :span="10">
            <div style="height: 450px; overflow:auto">
              <el-tree :data="ICDData" :props="ICDProps" :load="loadICDNode" lazy='' 
                @node-click="ICDNodeClick" @dblclick.native="ICDNodeDblclick(ICDitem)"></el-tree>
            </div>
          </el-col>
          <el-col :span="14">
            <table class="addDrug">
              <tr>
                <th>诊断名称/ICD编码</th><th>诊断类型</th><th>ICD疾病名称</th><th style="width:50px;">删除</th>
              </tr>
              <tr v-for="row in reports.icd_diagnosises">
                <td style="width:160px;">
                  <el-autocomplete
                    v-model="row.disease_code"
                    size="small"
                    :fetch-suggestions="querySearchICD"
                    placeholder="ICD搜索"
                    :trigger-on-focus="false"
                    @select="handleSelectICD">
                  </el-autocomplete>
                </td>
                <td style="width:80px;">
                  <select v-model="row.dia_type" style="width:80px;">
                    <option
                      v-for="item in DiagnosisType"
                      :label="item.label"
                      :value="item.value">
                    </option>
                  </select>
                </td>
                <td><el-input type="textarea" :rows="1" v-model="row.disease_name"></el-input></td>
                <td><el-button icon="delete" size="small" @click.native="deleteLine(row.index)"></el-button></td>
              </tr>
            </table>
            <el-button type="primary" size="small" @click.native="IncreaseLine">增加行</el-button>
          </el-col>
        </el-row>
      </el-dialog>
      <!-- ICD诊断 -->
      <div>
        <el-button type="primary" size="small" @click.native="ICDComplete">ICD全集</el-button>
        <el-button type="primary" size="small" @click.native="IncreaseLine">增加行</el-button>
        <el-button type="primary" size="small" @click.native="addMedicalHistory">保存病历</el-button>
        <table class="addDrug">
          <tr>
            <th>诊断名称/ICD编码</th><th>诊断类型</th><th>ICD疾病名称</th><th style="width:50px;">删除</th>
          </tr>
          <tr v-for="row in reports.icd_diagnosises">
            <td style="width:160px;">
              <el-autocomplete
                v-model="row.disease_code"
                size="small"
                :fetch-suggestions="querySearchICD"
                placeholder="ICD搜索"
                :trigger-on-focus="false"
                @select="handleSelectICD">
              </el-autocomplete>
            </td>
            <td style="width:80px;">
              <select v-model="row.dia_type" style="width:80px;">
                <option
                  v-for="item in DiagnosisType"
                  :label="item.label"
                  :value="item.value">
                </option>
              </select>
            </td>
            <td><el-input type="textarea" :rows="1" v-model="row.disease_name"></el-input></td>
            <td><el-button icon="delete" size="small" @click.native="deleteLine(row.index)"></el-button></td>
          </tr>
        </table>
      </div>
      <!-- 病历 -->
      <table>
        <tr>
          <td style="width:70px;">主诉:</td>
          <td style="width:50px;">
            <el-button type="primary" size="small" @click.native="clickTemplate('主诉','zs')">模板</el-button>
          </td>
          <td><el-input v-model="reports.main_description"></el-input></td>
          <td style="width:80px;">诊断类型:</td>
          <td style="width:80px;">
            <el-select v-model="reports.diagnostic_type" style="width:80px;">
              <el-option label="初诊" value="0"></el-option>
              <el-option label="复诊" value="1"></el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td>现病史:</td>
          <td>
            <el-button type="primary" size="small" @click.native="clickTemplate('现病史','xb')">模板</el-button>
          </td>
          <td colspan=3>
            <el-input type="textarea" v-model="reports.nowill_description"></el-input>
          </td>
        </tr>
        <tr>
          <td>既往史:</td>
          <td>
            <el-button type="primary" size="small" @click.native="clickTemplate('既往史','jw')">模板</el-button>
          </td>
          <td colspan=3>
            <el-input type="textarea" v-model="reports.historyill_description"></el-input>
          </td>
        </tr>
        <tr>
          <td>个人史:</td>
          <td>
            <el-button type="primary" size="small" @click.native="clickTemplate('个人史','gr')">模板</el-button>
          </td>
          <td colspan=3>
            <el-input type="textarea" v-model="reports.personal_description"></el-input>
          </td>
        </tr>
        <tr>
          <td>家庭史:</td>
          <td>
            <el-button type="primary" size="small" @click.native="clickTemplate('家庭史','jt')">模板</el-button>
          </td>
          <td colspan=3>
            <el-input type="textarea" v-model="reports.familyill_history"></el-input>
          </td>
        </tr>
      </table>
    </el-col>
    <!-- 历史病历 -->
    <el-col :span="10">
      <h4>该患者病历史</h4>
      <el-table :data="tableData" height="450" border stripe style="width: 100%">
        <el-table-column prop="name" label="编号">
        </el-table-column>
        <el-table-column prop="doctor" label="医生">
        </el-table-column>
        <el-table-column prop="d_time" label="时间"></el-table-column>
        <el-table-column inline-template label="操作">
          <el-button @click="checkMedicalHistory(row.id)" type="text" size="small">查看</el-button>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script>
import MedicalModify from '../prescriptions/MedicalModify.vue'
export default {
  data() {
    return {
      ICDitem: '',
      templateName: '',
      templateType: '',
      historyTemplates: [],
      templateData: [],
      tableData: [],
      ICDData: [],
      ICDProps: {
        children: 'children',
        label: 'label'
      },
      reports: {
        main_description: '',
        diagnostic_type: '0',
        nowill_description: '',
        historyill_description: '',
        personal_description: '',
        familyill_history: '',
        icd_diagnosises: [{
          index: 1,
          dia_type: 0,
          disease_code: '',
          disease_name: ''
        }]
      },
      DiagnosisType: [{
        value: 0,
        label: '初诊'
      },{
        value: 1,
        label: '疑诊'
      },{
        value: 2,
        label: '确诊'
      },{
        value: 3,
        label: '原因待查'
      }],
      addTemplateInfo: {
        name: '',
        content: '',
        type: ''
      },
      templatesVisible: false,
      addTemplateVisible: false,
      ICDVisible: false,
      titleName: '',
      Visible: false,
      recordId: '',
      hasChild: false
    }
  },
  props: {
    basicInfo: {
      type: Object,
      default: {
        partner_id: 0,
        partner_name: '',
        sex: '',
        age: '',
        birthday: '',
        phone: '',
        street: '',
        allergic_note: '',
      }
    },
    doctorInfo: null,
    currentTime: null
  },
  components: {
    MedicalModify
  },
  methods: {
    //点击模板事件
    clickTemplate(name, tp) {
      let vm = this
      vm.titleName = name + '模板'
      vm.templateType = tp
      vm.templatesVisible = true
      vm.templateName = ''
      vm.$http.get('/api/medicalRecords/mrCategory/type?type='+tp).then(function (response) {
        vm.templateData = response.data
      }, (response) => {
        vm.$message({
          showClose: true,
          message: '服务器连接失败',
          type: 'error'
        })
      })
    },
    //调用模板
    callTemplate(val, tp) {
      let vm = this
      switch(tp) {
        case 'zs':
          vm.reports.main_description = val
          break;
        case 'xb':
          vm.reports.nowill_description = val
          break;
        case 'jw':
          vm.reports.historyill_description = val
          break;
        case 'gr':
          vm.reports.personal_description = val
          break;
        case 'jt':
          vm.reports.familyill_history = val
          break;
      }
      this.templatesVisible = false
    },
    //新增模板
    addTemplate() {
      let vm = this
      vm.addTemplateInfo = {
        name: '',
        content: '',
        type: ''
      }
      vm.addTemplateVisible = true
    },
    //修改模板
    amendTemplate(item) {
      let vm = this
      vm.addTemplateInfo = JSON.parse(JSON.stringify(item))
      vm.addTemplateVisible = true
    },
    //删除模板
    deleteTemplate(Tid) {
      let vm = this
      vm.$http.get('/api/medicalRecords/delelteCategory/'+Tid).then(function (response) {
        vm.$message({
          showClose: true,
          message: '成功删除模板',
          type: 'success'
        })
        vm.queryTemplate()
      }, (response) => {
        vm.$message({
          showClose: true,
          message: '服务器连接失败',
          type: 'error'
        })
      })
    },
    //查询模板
    queryTemplate(name) {
      let vm = this
      if (name) {
        let path = vm.templateType + '/' +name
        vm.$http.get('/api/medicalRecords/selectCategory/'+path).then(function (response) {
          vm.templateData = response.data
        }, (response) => {
          vm.$message({
            showClose: true,
            message: '服务器连接失败',
            type: 'error'
          })
        })
      } else {
        vm.$http.get('/api/medicalRecords/mrCategory/type?type='+vm.templateType).then(function (response) {
          vm.templateData = response.data
        }, (response) => {
          vm.$message({
            showClose: true,
            message: '服务器连接失败',
            type: 'error'
          })
        })
      }
    },
    //确定修改或新增模板
    determine(addTemplateInfo) {
      let vm = this
      if (addTemplateInfo.id) {
        vm.$http.post('/api/medicalRecords/updateCategory', addTemplateInfo).then(function (response) {
          vm.addTemplateVisible = false
          vm.$message({
            showClose: true,
            message: '成功修改模板',
            type: 'success'
          })
          this.queryTemplate(addTemplateInfo.name)
        }, (response) => {
          vm.$message({
            showClose: true,
            message: '服务器连接失败',
            type: 'error'
          })
        })
      } else {
        addTemplateInfo.type = vm.templateType
        vm.$http.post('/api/medicalRecords/addCategory', addTemplateInfo).then(function (response) {
          vm.addTemplateVisible = false
          vm.$message({
            showClose: true,
            message: '成功添加模板',
            type: 'success'
          })
          this.queryTemplate(addTemplateInfo.name)
        }, (response) => {
          vm.$message({
            showClose: true,
            message: '服务器连接失败',
            type: 'error'
          })
        })
      }
    },
    //模板检索
    templateSearch(queryString, funcd) {
      let vm = this
      if (queryString) {
        let path = vm.templateType + '/' +queryString
        vm.$http.get('/api/medicalRecords/selectCategory/'+path).then(function (response) {
          let datas = response.data
          let data = datas.map(function(obj) {
            return { 'value': obj.name }
          })
          funcd(data)
        }, (response) => {
          vm.$message({
            showClose: true,
            message: '服务器连接失败',
            type: 'error'
          })
        })
      } else {
        funcd()
        this.queryTemplate()
      }
    },
    //选择模板处理
    templateSelect(item) {
      this.queryTemplate(item.value)
    },
    //查看历史病历
    checkMedicalHistory(id) {
      this.recordId = id
      this.Visible = true
    },
    //ICD全集点击
    ICDComplete() {
      let vm = this
      vm.$http.get('/api/medicalRecords/selectDisease/000000').then(function (response) {
        let data = response.data
        vm.ICDData = data.map(function(obj) {
          return {
            disease_code: obj.disease_code,
            disease_name: obj.disease_name,
            level: obj.level,
            father_level: obj.father_level,
            label: obj.disease_code+' '+obj.disease_name,
            children: [{}]
          }
        })
        vm.ICDVisible = true
      }, (response) => {
        vm.$message({
          showClose: true,
          message: '服务器连接失败',
          type: 'error'
        })
      })
    },
    //ICD节点点击
    ICDNodeClick(item) {
      this.ICDitem = item
    },
    //ICD节点双击
    ICDNodeDblclick(item) {
      if (item.level == '******') {
        this.reports.icd_diagnosises.push({
          index: 1,
          dia_type: 0,
          disease_code: item.disease_code,
          disease_name: item.disease_name
        })
        this.SinceGrowth()
      }
    },
    //ICD懒加载
    loadICDNode(node, resolve) {
      let vm = this
      if (node.level === 0) {
        resolve(vm.ICDData);
      } else if (node.data.level != '******') {
        vm.$http.get('/api/medicalRecords/selectDisease/'+node.data.level).then(function (response) {
          let data = response.data.map(function(obj) {
            if (obj.level != '******') {
              return {
                disease_code: obj.disease_code,
                disease_name: obj.disease_name,
                level: obj.level,
                father_level: obj.father_level,
                label: obj.disease_code+' '+obj.disease_name,
                children: [{}]
              }
            } else {
              return {
                disease_code: obj.disease_code,
                disease_name: obj.disease_name,
                level: obj.level,
                father_level: obj.father_level,
                label: obj.disease_code+' '+obj.disease_name
              }
            }
          })
          resolve(data)
        }, (response) => {
          vm.$message({
            showClose: true,
            message: '服务器连接失败',
            type: 'error'
          })
        })
      } else {
        resolve([])
      }
    },
    //ICD编码诊断搜索
    querySearchICD(queryString, funcd) {
      let vm = this
      if (queryString) {
        vm.$http.get('/api/medicalRecords/selectDiseaseByCode?code='+queryString).then(function (response) {
          let datas = response.data
          let data = datas.map(function(obj) {
            return { 
              'value': obj.disease_code+' '+obj.disease_name,
              'disease_code': obj.disease_code,
              'disease_name': obj.disease_name
            }
          })
          funcd(data)
        }, (response) => {
          vm.$message({
            showClose: true,
            message: '服务器连接失败',
            type: 'error'
          })
        })
      } else {
        funcd()
      }
    },
    //处理搜索的ICD编码诊断
    handleSelectICD(item) {
      for (let i = 0; i < this.reports.icd_diagnosises.length; i++) {
        if (this.reports.icd_diagnosises[i].disease_code == item.value) {
          this.reports.icd_diagnosises[i].disease_code = item.disease_code
          this.reports.icd_diagnosises[i].disease_name = item.disease_name
        }
      }
    },
    //增加行
    IncreaseLine() { 
      this.reports.icd_diagnosises.push({
        index: 1,
        dia_type: 0,
        disease_code: '',
        disease_name: ''
      })
      this.SinceGrowth()
    },
    //删除行
    deleteLine(index) {
      this.reports.icd_diagnosises.splice(index-1, 1)
      this.SinceGrowth()
    },
    //索引
    SinceGrowth() {
      for(let i=0;i<this.reports.icd_diagnosises.length;i++) {
        this.reports.icd_diagnosises[i].index=i+1 
      }  
    },
    //保存病历
    addMedicalHistory() {
      let vm = this
      let data = Object.assign({},vm.basicInfo,vm.reports,vm.doctorInfo)
      data.d_time = vm.currentTime
      vm.$http.post('/api/medicalRecords/medicineRecord', data).then((response) => {
        vm.$message({
          showClose: true,
          message: '添加成功',
          type: 'success'
        })
      }, (response) => {
        vm.$message({
          showClose: true,
          message: '服务器连接失败',
          type: 'error'
        })
      })
    },
    fromSon() {
      this.Visible = false
    }
  },
  watch: {
    basicInfo: {
      deep: true,
      handler: function(obj) {
        this.$http.get('/api/medicalRecords/getMedicalRecordByPatientId/'+obj.partner_id).then(function (response) {
          this.tableData = response.data
        }, (response) => {
          this.$message({
            showClose: true,
            message: '服务器连接失败',
            type: 'error'
          })
        })
      }
    }
  }
}
</script>